<template>
  <div class="t-form t-form-filter">
    <el-form
      label-position="right"
      :label-width="labelWidth"
      ref="form"
      :inline="true"
      :model="pramas"
    >
      <slot name="before" />
      <template v-if="type == 'list'">
        <t-form-item-filter
          @change-filter="changeFilter"
          :defaultPramas="defaultPramas"
          type="list"
          :options="configure"
        >
          <slot />
        <el-form-item label=" " label-width="0px"  class="buttons">
          <t-button v-if="options.length != 1"   @click="resetForm"
            >重置</t-button
          >
          <t-button   type="primary" @click="querySubmit"
            >查询</t-button
          >
        </el-form-item>
        </t-form-item-filter>
      </template>

      <template v-if="type == 'group'">
        <div
          class="t-flex t-col-top t-flex-wrap t-m-b-10"
          v-for="(items, indexs) in configure"
          :key="indexs"
        >
          <p
            class="t-m-0 t-font-14 t-line-height-28 t-font-bold"
            :style="
              'width:' + ('labelWidth' in items ? items.labelWidth : 120) + 'px'
            "
          >
            {{ items.label }}
          </p>
          <div
            :style="
              'width: calc(100% - ' +
              ('labelWidth' in items ? items.labelWidth : 120) +
              'px)'
            "
            class="t-flex t-flex-wrap"
          >
            <t-form-item-filter
              ref="tFormItemFilter" 
              @change-filter="changeFilter"
              type="group"
              :defaultPramas="defaultPramas"
              :options="items.data"
            ></t-form-item-filter>
          </div>
        </div>
        <slot />
        <el-form-item label=" " label-width="0px" class="buttons">
          <t-button v-if="options.length != 1"   @click="resetForm"
            >重置</t-button
          >
          <t-button   type="primary" @click="querySubmit"
            >查询</t-button
          >
        </el-form-item>
      </template>
      
    </el-form>
  </div>
</template>

<script>
/**
 * 根据键名排序
 * @param {} key
 * let arr = [{sort:2},{sort:0}]
 * arr.sort(compare('sort'))
 */
const compare = function (key) {
  return function (a, b) {
    var value1 = a[key];
    var value2 = b[key];
    return value1 - value2;
  };
};
export default {
  props: {
    type: {
      type: String,
      default: "list", //group
    },
    options: {
      type: Array,
      default: () => {
        return [];
      },
    },
    extendOptions: {
      type: Object,
      default: () => {
        return {};
      },
    },
    labelWidth: {
      type: String,
      default: "",
    },
    defaultPramas:{
      type: Object,
      default: () => {
        return {};
      },
    }
  },
  data() {
    return {
      pramas: {},
      configure: [],
    };
  },
  watch: {
    deep: true,
    options(d) {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    //初始化
    init() {
      //按sort字段排序
      this.configure = [...this.options].sort(compare("sort"));
      //设置默认值
      if (this.type == "list") {
        this.configure.forEach((item) => {
          if ("defualValue" in item) {
            this.$set(this.pramas, item.value, item.defualValue);
          } else {
            this.$set(this.pramas, item.value, "");
          }
        });
      } else if (this.type == "group") {
        this.configure.forEach((item) => {
          item.data.forEach((_item) => {
            if ("defualValue" in _item) {
              this.$set(this.pramas, _item.value, _item.defualValue);
            } else {
              this.$set(this.pramas, _item.value, "");
            }
          });
        });
      }
    },
    //提交筛选字段
    async querySubmit() {
      let data = await this.handleExtendOptions();
      let _data = JSON.parse(JSON.stringify(data));
      for (const key in _data) {
        if (Array.isArray(_data[key])) {
          _data[key] = _data[key].join();
        }
      }
      this.$emit("listen-filter", _data);
    },
    async resetForm(formName) {
      let data = await this.handleExtendOptions();
      this.$refs["form"].resetFields();
      this.defaultPramas = data
      this.$emit("reset", data);
    },
    //抛出事件
    async changeFilter(pramas = this.pramas) {
      this.pramas = pramas;
      this.$emit("change-filter", this.pramas);
    },
    //处理扩展筛选项字段
    handleExtendOptions() {
      return new Promise((reslove, reject) => {
        if (JSON.stringify(this.extendOptions) != "{}") {
          this.pramas = Object.assign({}, this.pramas, this.extendOptions);
        }
        reslove(this.pramas);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.t-form-filter {
  position: relative;
  border-radius: 5px;
  padding: 25px 25px 0 25px;
  background: $wihte-color;
  margin-bottom: 20px;
}
/deep/.el-button--default {
  background: #e8eaec;
  border: 1px solid #e8eaec;
  color: #17233d;
}

.buttons {
  /deep/.el-form-item__content {
    text-align: left;
  }
}
</style>